<template>
	<!-- 产品分类导航 -->
	<view class="wrap">
		<view class="menu-category-box u-m-b-10" :style="list.length <= oneRowNum ?`height:140rpx` : `height:300rpx`">
			<view
				class="menu-swiper-box"
				:style="list.length <= oneRowNum ? `height:140rpx` : `height:300rpx`"
			>
				<view class="menu-swiper-item" v-for="(itemList, index) in newList" :key="index" v-if="index==0">
					<view class="menu-tab-box u-flex u-flex-wrap">
						<view
							class="tab-list u-flex-col u-col-center u-row-center"
							:style="{ width: 100 / oneRowNum + '%' }"
							v-for="(item, index) in itemList"
							:key="index"
							@click="item.name == '全部服务'?toSearch():toSearchOne(item)"
						>
							<image class="tab-img" :src="item.logo_image"></image>
							<text class="">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
    <u-toast ref="submitAudit"></u-toast>
  </view>
</template>

<script>
/**
 * shGridSwiper-滑动宫格列表
 * @property {Array} list - 列表数据
 * @property {Number|String} oneRowNum - 单行数量
 */
export default {
	components: {},
	data() {
		return {
			categoryCurrent: 0 ,//分类轮播下标
		};
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		oneRowNum: {
			type: [Number, String],
			default: 5
		}
	},
	computed: {
		newList() {
			if (this.list.length) {
				let data = this.$tools.splitData(this.list, this.oneRowNum * 2);
				return data;
			}
		}
	},
  created(){
    console.log("=====newList",this.newList)
  },
	methods: {
    toSearchOne(item){
      uni.navigateTo({
        url: '/pages/index/food?store_cate_id=' + item.store_cate_id + "&title=" + item.name
      })
    },
	  toSearch(){
      // let options = {
      //   type:"default",
      //   icon: false,
      //   back: false,
      //   title:'搜索后展示 好店信息 无惠品'
      // };
      // this.$refs.submitAudit.show(options);
      setTimeout(()=>{
        this.$Router.push('/pages/index/serve');
      },1000)
    },
		// 轮播
		onSwiper(e) {
			this.categoryCurrent = e.detail.current;
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		}
	}
};
</script>

<style lang="scss">
// 产品分类
.menu-category-box{
  margin-top: 30rpx!important;
}
.menu-category-box,
.menu-swiper-box {
	position: relative;
	background: #fff;
	.menu-swiper-item {
		background: #fff;
		height: 100%;
		width: 100%;
	}
	.menu-tab-box {
		.tab-list {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin: 20rpx 0;
			.tab-img {
				width: 72rpx;
				height: 72rpx;
				margin-bottom: 6rpx;
			}
      text{
        font-size: 24rpx;
        color: #666666;
      }
		}
	}

	.menu-category-dots {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10rpx;

		.category-dot {
			width: 12rpx;
			height: 12rpx;
			background: #eeeeee;
			margin-right: 10rpx;
		}

		.category-dot-active {
			width: 12rpx;
			height: 12rpx;
			background: #e9b461;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
}
</style>
